<template>
	<div class="my">
		<!--用户头像信息-->
		<div class="headwrap">
			<!--退出按钮-->
			<div class="my_out" @click="loginOut">
				<img src="../../assets/images/vip/tuichu.png">
			</div>
			<!-- <div class="gohome">
				<router-link to='/spellgrounpView'><img src="../../assets/images/shouye@2x.png" width="18"/></router-link>
			</div> -->
			<!--用户头像-->
			<div class="headcon">
				<div class="headbox">
                    <!-- 这种通过子路由搭建的to可以与children里不一样按照绝对路径其实是路由那边已经处理ok了。这边只用相对pages下文件夹 -->
					<router-link to="/vip/vipInfo">
					<a class="headimg"></a>
                    </router-link>
				</div>
				<!--用户名称及地址-->
				<p class="userName f18" v-if="userinfo.nickName" >{{userinfo.nickName}}</p>
				<p class="userName f18" v-else >{{userinfo.loginName}}</p>
				<p class="userAddress f14">{{userinfo.neighborhood}}</p>
			</div>
		</div>
		<!--我的订单-->
		<div class="myContainer">

			<div class="myOrder">
				<div class="myOrderHead ">
					<router-link class='wbox wmiddle' tag='div' to='/vip/order/allOrder'>
					<div class="wo_t wfl">我的订单</div>
					<div class="checkAll">查看全部</div>
					</router-link>
				</div>
				<!--我的订单列表-->
				<ul class="myList clearfix">
					<li>
						<router-link class='wbox wmiddle'  to='/vip/order/dfkOrder'>
							<span class="icons icons1"></span>
							<p>待确认</p>
						</router-link>
					</li>
					<li>
						<router-link class='wbox wmiddle'  to='/vip/order/dfkOrder'>
							<span class="icons icons2"></span>
							<p>待付款</p>
						</router-link>
					</li>
					<li>
						<router-link class='wbox wmiddle'  to='/vip/order/dshOrder'>
							<span class="icons icons3"></span>
							<p>待收货</p>
						</router-link>
					</li>
					<li>
						<router-link class='wbox wmiddle'  to='/vip/order/ywcOrder'>
							<span class="icons icons4"></span>
							<p>待评价</p>
						</router-link>
					</li>

				</ul>
			</div>
			<!--我的大件会-->
			<div class="myDj">
				<div class="myDj_text">我的大件会</div>
				<ul class="myDjList clearfix">
					<li>
						<router-link to="/vip/order/myHeader">
							<span class="icons icons1"></span>
							<p>我的团长</p>
						</router-link>
					</li>
					<li>
						<router-link to="/vip/order/signRecord">
							<span class="icons icons2"></span>
							<p>报名记录</p>
						</router-link>
					</li>
					<li>
						<router-link to="/vip/order/qdRecord">
							<span class="icons icons3"></span>
							<p>签到记录</p>
						</router-link>
					</li>
					<li>
						<router-link to='/vip/mySpell/ptwfq'>
							<span class="icons icons4"></span>
							<p>我的拼团</p>
						</router-link>
					</li>
					<li>
						<router-link to='/vip/addressList'>
							<span class="icons icons5"></span>
							<p>收货地址管理</p>
						</router-link>
					</li>
					<li>
						<a>
							<span class="icons icons6"></span>
							<p>关于大件会</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>
<script>
	import { fetch } from '../../api/index'
	import { Indicator, Toast } from 'mint-ui';
	import { messageBox } from '../../messageBox'
	export default {
		name: 'login',
		data() {
			return {
				userinfo:{}
			}
		},
		mounted() {
		},
		activated(){
			this.getuserInfo()
		},
		created() {
			
		},
		methods: {
			loginOut() {
				let that = this
				messageBox('确定', '取消', '确认退出？', function() {
					localStorage.removeItem('token')
					localStorage.removeItem('openId')
					that.$router.push('/')
				})
			},
			async getuserInfo(){
				let data = {
					token:localStorage.getItem('token'),
					loginType:localStorage.getItem('loginType')
				}
				let res = await fetch('/api/fg/personPage',data)
				if(res.code == 200){
					console.log(res.obj.member)
					this.userinfo = res.obj.member
				}
			},
			/* govipInfo() {
				this.$router.push({
					// path: 'vipInfo',
					name: 'vipInfo'
				})
			} */
		}
	}
</script>

<style scoped lang="less">
.my{
  position: relative;
  font-size: 26/37.5rem;
  text-align: left;
}
.my .headwrap{
	position: relative;
	background: url(../../assets/images/vip/beibeijing.jpg) no-repeat;
	background-size: cover;
	height: 220px;
	overflow: hidden;
}
.my .headwrap .my_out{
	width: 17px;
	height: 18px;
	position: absolute;
	top:22px;
	right: 16px;
	z-index: 99;
}
.my .headwrap .gohome{
	width: 18px;
	height: 18px;
	position: absolute;
	top:22px;
	left: 16px;
	z-index: 99;
}
.my .headwrap .headcon{
	width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.my .headwrap .headcon p{
	letter-spacing: 0px;
	color: #fff;
}
.headwrap .headcon .userName{
	margin-bottom: 8.5px;
}
.my .headwrap .headbox{
	width: 81px;
	height: 81px;
	margin: 29px auto 10px auto;
    border-radius: 100%;
}
.headbox .headimg {
    position: relative;
    display: block;
    width: 81px;
    height: 81px;
    border-radius: 100%;
    background: url(../../assets/images/vip/morentouxiang.png) no-repeat;
    background-size: cover;
    border: 2px solid #fff;
    box-sizing: border-box;
    background-color: #fff;
}
/*我的订单*/
.my .myContainer{
	position: relative;
	top:-46px;
	margin: 0 16px;
}
.my .myOrder{
	height: 119.5px;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 20px 0px rgba(96, 96, 96, 0.08);
	border-radius: 5px;
	padding-bottom: 20px;
}
.myOrder .myOrderHead{
	position: relative;
	border-bottom: 1px solid #eee;	
	padding:12px 16.5px;
	font-size: 15px;
	color: #333;
}
.myOrder .checkAll{
	color: #888888;
	margin-right: 20px;
}
.myOrder .myOrderHead .checkAll:after {
    content: '';
    width: 9px;
    height: 9px;
    font-size: 0;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -5.5px;
    border-right: 1px solid #888;
    border-top: 1px solid #888;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*我的订单列表*/
.my .myOrder ul.myList li{
    width: 25%;
    height: auto;
    float: left;
    text-align: center;
}
.myOrder ul.myList li a, .myDjList li a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 14px 0px;
}
.myOrder ul.myList li a span.icons,.myDjList li a span.icons{
    display: block;
    width: 20px;
    height: 20px;
    background-size: cover;
    overflow: hidden;
    margin: 10px auto;
    background-position: center center;
}
.myOrder ul.myList li a span.icons1{
	width: 22px;
	background-image: url(../../assets/images/vip/daiqueren.png);
}
.myOrder ul.myList li a span.icons2{
	width: 21.5px;
	background-image: url(../../assets/images/vip/daifukuan.png);
}
.myOrder ul.myList li a span.icons3{
	background-image: url(../../assets/images/vip/daishouhuo.png);
}
.myOrder ul.myList li a span.icons4{
	width: 23.5px;
	background-image: url(../../assets/images/vip/daipinjia.png);
}
/*我的大件会*/

.myContainer .myDj{
	margin-top: 12px;
	background-color:#fff;
	border-radius: 5px;
	box-shadow: 0px 0px 20px 0px rgba(96, 96, 96, 0.08);
	overflow: hidden;
}
.myContainer .myDj .myDj_text{
	padding: 12px 16.5px;
	border-bottom: 1px solid #eee;
	color: #333;
	font-size: 30/37.5rem;
}
.myContainer .myDj .myDjList li{
	float: left;
	width: 33%;
	height: auto;
	text-align: center;
}
.myDj ul.myDjList li a span.icons{
    margin: 8.5px auto;
}
.myDj ul.myDjList li a span.icons1{
	width: 19px;
	background-image: url(../../assets/images/vip/wodetuanzhang.png);
}
.myDj ul.myDjList li a span.icons2{
	background-image: url(../../assets/images/vip/baomingjilu.png);
}
.myDj ul.myDjList li a span.icons3{
	width: 17.5px;
	background-image: url(../../assets/images/vip/qiandaojilu.png);
}
.myDj ul.myDjList li a span.icons4{
	background-image: url(../../assets/images/vip/wodepintuan.png);
}
.myDj ul.myDjList li a span.icons5{
	width: 16px;
	background-image: url(../../assets/images/vip/shouhuodizhi@2x.png);
}
.myDj ul.myDjList li a span.icons6{
	background-image: url(../../assets/images/vip/about.png);
}
</style>

